<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        {{message}}
      <div v-if="seen">kankan</div>  
      <select>
          <option v-for = "item in categories">{{item.text}}</option>
          
      </select>
      <button v-on:click = "hide">关</button>
      <button v-on:click = "open">开</button>
      <br>
      乘数1<input type="text"v-model="m1">,乘数<input v-model="m2"type="text">,乘积:{{result3)}}
      <br>
      <ul>
          <!-- <li v-for = "item in todos">{{item.text}}</li> -->
          <todo-item v-bind:data="todos" v-for = "todos in todos"></todo-item>
      </ul>
    </div>
    <script>
       Vue.component('todo-item',{
           props:['data'],
           template:'<li>{{data.text}}</li>'
       });
       var vm = new Vue({
           el:'#box',
           data :{
            message:'abc',
            seen:true,
            categories: [
               {id: 1,text:'java'},
               {id:2,text:'js'},
               {id:2,text:'js'},
           ],
           todos:[
               {id: 1,text:'java'},
               {id:2,text:'js'},
               {id:2,text:'js'}, 
           ],
           m1:0,
           m2:0,
           result:0
           },
          methods :{
              hide:function(){
                  vm.seen=false;
              },
              open:function(){
                  vm.seen=true;
              },
              getResult:function(){
                  return this.m1*this.m2;
              }
          },
          computed:{
              result3:function(){
                  return this.m1*this.m2;//注意怎么用，不带括号。
              },
              result2:function(){
                  return 100;
              }
          }
       })
    </script>
</body>
</html>